<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter中ShapeBorder使用总结》 - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="早起的年轻人做的网站"><meta property="og:title" content="《Flutter中ShapeBorder使用总结》" />
<meta property="og:description" content="
本文主要介绍
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/flutter%E4%B8%ADshapeborder%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93/" />
<meta property="og:image" content="https://luckly.work/logo.png"/>
<meta property="article:published_time" content="2021-07-28T22:54:53+08:00" />
<meta property="article:modified_time" content="2021-07-28T22:54:53+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:title" content="《Flutter中ShapeBorder使用总结》"/>
<meta name="twitter:description" content="
本文主要介绍
"/>
<meta name="application-name" content="LoveIt">
<meta name="apple-mobile-web-app-title" content="LoveIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/flutter%E4%B8%ADshapeborder%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93/" /><link rel="prev" href="https://luckly.work/dart%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E4%B9%8B%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" /><link rel="next" href="https://luckly.work/flutter%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%E6%95%B4%E7%90%861/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter中ShapeBorder使用总结》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/flutter%E4%B8%ADshapeborder%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "flutter","wordcount":  1422 ,
        "url": "https:\/\/luckly.work\/flutter%E4%B8%ADshapeborder%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93\/","datePublished": "2021-07-28T22:54:53+08:00","dateModified": "2021-07-28T22:54:53+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/luckly.work\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "早起的年轻人"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">Lucklyの博客 - 在阅读中遇见自己</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/posts/">所有文章</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/flutter/">Flutter</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/read/">读书笔记</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/go/">Go</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/tags/">标签</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/">分类</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="https://github.com/ITmxs">Github</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/friend/">友链</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter中ShapeBorder使用总结》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>早起的年轻人</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-28">2021-07-28</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 1422 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 3 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#简介">简介</a></li>
        <li><a href="#beveledrectangleborder">BeveledRectangleBorder</a></li>
        <li><a href="#boxborder">BoxBorder</a>
          <ul>
            <li><a href="#border">Border</a></li>
            <li><a href="#borderdirectional">BorderDirectional</a></li>
          </ul>
        </li>
        <li><a href="#circleborder">CircleBorder</a></li>
        <li><a href="#continuousrectangleborder">ContinuousRectangleBorder</a></li>
        <li><a href="#roundedrectangleborder">RoundedRectangleBorder</a></li>
        <li><a href="#stadiumborder">StadiumBorder</a></li>
        <li><a href="#inputborder">InputBorder</a>
          <ul>
            <li><a href="#outlineinputborder">OutlineInputBorder</a></li>
            <li><a href="#underlineinputborder">UnderlineInputBorder</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍</p>
</blockquote>
<h2 id="简介">简介</h2>
<p>ShapeBorder 用于设置形状和轮廓，比如圆形，矩形，圆角矩形等。常用于 Container 中。</p>
<p>继承结构如下：</p>
<ul>
<li>ShapeBorder【abstract】
<ul>
<li>BeveledRectangleBorder</li>
<li>BoxBorder【abstract】
<ul>
<li>Border</li>
<li>BorderDirectional</li>
</ul>
</li>
<li>CircleBorder</li>
<li>ContinuousRectangleBorder</li>
<li>RoundedRectangleBorder</li>
<li>StadiumBorder</li>
<li>InputBorder【abstract】
<ul>
<li>OutlineInputBorder</li>
<li>UnderlineInputBorder</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>其中 ShapeBorder、BoxBorder、InputBorder 是抽象父类。InputBorder 通常用于输入框相关的。</p>
<p>类的关系图</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/ShapeBorder%e5%ad%90%e7%b1%bb%e7%bb%a7%e6%89%bf%e5%85%b3%e7%b3%bb%e5%9b%be.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        title="ShapeBorder子类继承关系图" /></a></p>
<h2 id="beveledrectangleborder">BeveledRectangleBorder</h2>
<p>斜面圆角矩形</p>
<p>继承关系:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">BeveledRectangleBorder &gt; ShapeBorder
Widget _beveledRectangleBorder() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage(&#39;lib/assets/img_flutter.png&#39;),
          fit: BoxFit.cover,
        ),
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(20),
          side: BorderSide(
            width: 2,
            color: Colors.blue,
            style: BorderStyle.solid,
          ),
        ),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/beveled_rectangle_border.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        title="beveled_rectangle_border" /></a></p>
<h2 id="boxborder">BoxBorder</h2>
<p>BoxBorder主要掌管边线方面的事，自身是abstract，不能直接用</p>
<p>BoxBorder官方说明</p>
<blockquote>
<p>Base class for box borders that can paint as rectangles, circles, or rounded rectangles.</p>
</blockquote>
<h3 id="border">Border</h3>
<p>继承关系:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Border &gt; BoxBorder &gt; ShapeBorder
</code></pre></td></tr></table>
</div>
</div><p>Border官方说明</p>
<blockquote>
<p>A border of a box, comprised of four sides: top, right, bottom, left.</p>
</blockquote>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Widget _border() {
  return Center(
    child: Container(
      margin: EdgeInsets.all(16),
      padding: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        color: Colors.orange,
        shape: Border(
          top: BorderSide(width: 6.0, color: Colors.black12),
          left: BorderSide(width: 6.0, color: Colors.black12),
          right: BorderSide(width: 6.0, color: Colors.black26),
          bottom: BorderSide(width: 6.0, color: Colors.black26),
        ),
      ),
      child: Text(
        &#34;Border&#34;,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果图：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/border.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        title="border" /></a></p>
<h3 id="borderdirectional">BorderDirectional</h3>
<p>继承关系:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">BorderDirectional &gt; BoxBorder &gt; ShapeBorder
BorderDirectional` 通过 `top`,`bottom`,`start`,`end`分别控制上下左右的边线
边线对象`BorderSide
Widget _borderDirectional() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage(&#39;lib/assets/img_flutter.png&#39;),
          fit: BoxFit.cover,
        ),
        shape: BorderDirectional(
          start: BorderSide(color: Colors.black, width: 15),
          end: BorderSide(color: Colors.black, width: 15),
          top: BorderSide(
            color: Colors.black,
          ),
          bottom: BorderSide(
            color: Colors.black,
          ),
        ),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/border_directional_01.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        title="border_directional_01" /></a></p>
<p>只设置左右的<code>BorderSide</code></p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Widget _borderDirectional2() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage(&#39;lib/assets/img_flutter.png&#39;),
          fit: BoxFit.cover,
        ),
        shape: BorderDirectional(
          start: BorderSide(color: Colors.black, width: 15),
          end: BorderSide(color: Colors.black, width: 15),
        ),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/border_directional_02.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        title="border_directional_02" /></a></p>
<h2 id="circleborder">CircleBorder</h2>
<p>圆形边框。</p>
<p>继承关系:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">CircleBorder &gt; ShapeBorder
Widget _circleBorder1() {
  return Center(
    child: Container(
      width: 120,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage(&#39;lib/assets/img_flutter.png&#39;),
          fit: BoxFit.cover,
        ),
        shape: CircleBorder(
          side: BorderSide(),
        ),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/circle_border_01.jpg" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_02.png"
        title="circle_border_01" /></a></p>
<p>上面的是使用默认参数的效果</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/circle_border_03.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        title="circle_border_03" /></a></p>
<p>通过设置BorderSide来设置边框颜色和宽度，以及是否显示边框</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Widget _circleBorder2() {
  return Center(
    child: Container(
      width: 120,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage(&#39;lib/assets/img_flutter.png&#39;),
          fit: BoxFit.cover,
        ),
        shape: CircleBorder(
          side: BorderSide(
            width: 10,
            color: Colors.blue,
            style: BorderStyle.solid,
          ),
        ),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/circle_border_02.jpg" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        title="circle_border_02" /></a></p>
<h2 id="continuousrectangleborder">ContinuousRectangleBorder</h2>
<p>平滑过渡的矩形边框</p>
<p>继承关系:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">ContinuousRectangleBorder &gt; ShapeBorder
Widget _continuousRectangleBorder() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage(&#39;lib/assets/img_flutter.png&#39;),
          fit: BoxFit.cover,
        ),
        shape: ContinuousRectangleBorder(
          borderRadius: BorderRadius.circular(40),
          side: BorderSide(
            width: 2,
            color: Colors.blue,
            style: BorderStyle.solid,
          ),
        ),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/continuous_rectangle_border.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        title="continuous_rectangle_border" /></a></p>
<h2 id="roundedrectangleborder">RoundedRectangleBorder</h2>
<p>圆角矩形。</p>
<p>继承关系:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">RoundedRectangleBorder &gt; ShapeBorder
Widget _roundedRectangleBorder() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage(&#39;lib/assets/img_flutter.png&#39;),
          fit: BoxFit.cover,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
          side: BorderSide(
            width: 2,
            color: Colors.blue,
            style: BorderStyle.solid,
          ),
        ),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/rounded_rectangle_border_01.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        title="rounded_rectangle_border_01" /></a></p>
<h2 id="stadiumborder">StadiumBorder</h2>
<p>体育场形状。即两边是半圆。</p>
<p>继承关系:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">StadiumBorder &gt; ShapeBorder
Widget _stadiumBorder() {
  return Center(
    child: Container(
      width: 240,
      height: 120,
      margin: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        image: DecorationImage(
          image: AssetImage(&#39;lib/assets/img_flutter.png&#39;),
          fit: BoxFit.cover,
        ),
        shape: StadiumBorder(
          side: BorderSide(
            width: 2,
            color: Colors.blue,
            style: BorderStyle.solid,
          ),
        ),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/stadiu_border_01.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        title="stadiu_border_01" /></a></p>
<h2 id="inputborder">InputBorder</h2>
<p>继承关系:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">InputBorder &gt; ShapeBorder
</code></pre></td></tr></table>
</div>
</div><p>官方说明：</p>
<blockquote>
<p>Defines the appearance of an [InputDecorator]’s border.</p>
<p>An input decorator’s border is specified by [InputDecoration.border].</p>
<p>The border is drawn relative to the input decorator’s “container” which</p>
<p>is the optionally filled area above the decorator’s helper, error,and counter.</p>
</blockquote>
<p>常用的输入边框，有2个衍生子类<code>OutlineInputBorder</code> 和<code>UnderlineInputBorder</code></p>
<h3 id="outlineinputborder">OutlineInputBorder</h3>
<p>继承关系:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">OutlineInputBorder &gt; InputBorder &gt; ShapeBorder
Widget _outlineInputBorder() {
  return Center(
    child: Container(
      margin: EdgeInsets.all(16),
      padding: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        color: Colors.orange,
        shape: OutlineInputBorder(
          borderSide: BorderSide(width: 2.0, color: Colors.purple),
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
      child: Text(
        &#34;OutlineInputBorder&#34;,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/outlineInput_borde.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/circle_border_01.jpg"
        title="outlineInput_borde" /></a></p>
<h3 id="underlineinputborder">UnderlineInputBorder</h3>
<p>继承关系:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">UnderlineInputBorder &gt; InputBorder &gt; ShapeBorder
Widget _underlineInputBorder() {
  return Center(
    child: Container(
      margin: EdgeInsets.all(16),
      padding: EdgeInsets.all(16),
      decoration: ShapeDecoration(
        color: Colors.orange,
        shape: UnderlineInputBorder(
          borderSide: BorderSide(width: 2.0, color: Colors.purple),
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),
      child: Text(
        &#34;UnderlineInputBorder&#34;,
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
  );
}
</code></pre></td></tr></table>
</div>
</div><p>效果如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_shape_border/underlineInput_border.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_01.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_01.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_01.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_01.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/border_directional_01.png"
        title="underlineInput_border" /></a></p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-28</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://luckly.work/flutter%E4%B8%ADshapeborder%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93/" data-title="《Flutter中ShapeBorder使用总结》" data-hashtags="flutter"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://luckly.work/flutter%E4%B8%ADshapeborder%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93/" data-hashtag="flutter"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://luckly.work/flutter%E4%B8%ADshapeborder%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93/" data-title="《Flutter中ShapeBorder使用总结》"><i class="fab fa-hacker-news fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://luckly.work/flutter%E4%B8%ADshapeborder%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93/" data-title="《Flutter中ShapeBorder使用总结》"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://luckly.work/flutter%E4%B8%ADshapeborder%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93/" data-title="《Flutter中ShapeBorder使用总结》" data-image="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/dart%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80%E4%B9%8B%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" class="prev" rel="prev" title="《Dart语言基础之设计模式》"><i class="fas fa-angle-left fa-fw"></i>《Dart语言基础之设计模式》</a>
            <a href="/flutter%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%E6%95%B4%E7%90%861/" class="next" rel="next" title="《Flutter最佳实践整理1》">《Flutter最佳实践整理1》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">早起的年轻人</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"cookieconsent":{"content":{"dismiss":"同意","link":"了解更多","message":"本网站使用 Cookies 来改善您的浏览体验."},"enable":true,"palette":{"button":{"background":"#f0f0f0"},"popup":{"background":"#1aa3ff"}},"theme":"edgeless"},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.zh-cn","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
